<template>
  <div>
    <div class="setting-page">
      <!--<img src="../../../../src/assets/settinyschool/find_head_url.jpg" alt class="find-head-img"/>-->
      <img :src="navImg" alt class="find-head-img"/>
      <div class="find-navbar">知识付费设置</div>
      <!--左侧预览区域-->
      <!-- <vuedraggable v-model="list" handle=".contentList" class="wrapper" animation="300">
        <transition-group> -->
      <div
        v-for="(item,index) in list"
        :key="index"
        :class="leftIndex === index ? 'border' : ''"
        class="contentList"
        @click="left_click(index)"
      >
        <!--删除按钮-->
        <div hidden v-if="leftIndex === index" class="close" @click.stop @click="close(item.id)">
          <img src="../../../assets/settinyschool/delete.png" alt/>
        </div>
        <!--图片广告左侧预览组件-->
        <imageAd v-if="item.type === 'image_ad'" :list="list" :left-index="index"/>
        <bannerAd v-if="item.type === 'banner_ad'" :list="list" :left-index="index"/>
        <course v-if="item.type === 'course'" :list="list" :left-index="index"/>
        <class v-if="item.type === 'class'" :list="list" :left-index="index"/>
        <information v-if="item.type === 'information'" :list="list" :left-index="index"/>
        <assemble v-if="item.type === 'assemble'" :list="list" :left-index="index"/>
        <bargain v-if="item.type === 'bargain'" :list="list" :left-index="index"/>
        <seckill v-if="item.type === 'seckill'" :list="list" :left-index="index"/>
        <navTab v-if="item.type === 'navTab'" :list="list" :left-index="index"/>
        <Recommend v-if="item.type === 'recommend'" :list="list" :left-index="index"/>
      </div>
      <!-- </transition-group>
    </vuedraggable> -->
      <div class="multi-find-section find-section clearfix">
        <div class="section-title">基础组件</div>
        <div class="section-button-group clearfix">
          <el-button style="width:30%" disabled @click="addImageAd()">轮播图</el-button>
          <el-button style="width:30%" disabled @click="addCourse()">预约直播</el-button>
          <el-button style="width:30%" disabled @click="addClass()">热门课程</el-button>
          <el-button style="width:30%" disabled @click="addBannerAd()">营销活动</el-button>
          <!--<el-button style="width:30%" @click="addInformation()">资讯</el-button>-->
          <el-button style="width:30%" disabled @click="addMembers()">导航菜单</el-button>
          <el-button style="width:30%" disabled @click="addRecommend()">个性推荐</el-button>
        </div>
      </div>
      <!-- 底部tab -->
      <div class="find-footer">
        <div class="find-footer-item active" style="width: 32%;">
          <i class="el-icon-magic-stick find-footer-item__icon"></i>
          <span class="find-footer-item__text">发现</span>
        </div>
        <div class="find-footer-item" style="width: 33%;">
          <i class="el-icon-reading find-footer-item__icon"></i>
          <span class="find-footer-item__text">学习</span>
        </div>
        <div class="find-footer-item" style="width: 32%;">
          <i class="el-icon-user find-footer-item__icon"></i>
          <span class="find-footer-item__text">我的</span>
        </div>
      </div>
    </div>
    <el-button type="primary" class="saveBtn" @click="addAssembly">保存</el-button>
  </div>
</template>
<script>
  import vuedraggable from 'vuedraggable'
  import ImageAd from './siteset2/imageAd'
  import BannerAd from './siteset2/bannerAd'
  import Course from './siteset2/courseList'
  import Class from './siteset2/classList'
  import Information from './siteset2/information'
  import Assemble from './siteset2/assemble'
  import Bargain from './siteset2/bargain'
  import Seckill from './siteset2/seckill'
  import navTab from './siteset2/navtab'
  import Recommend from './siteset2/recommend'
  import { batchSave, del, list } from '@/api/system/mobile_assembly'
  import { getTenantId } from '@/utils/auth'

  export default {
    components: {
      vuedraggable,
      ImageAd,
      BannerAd,
      Course,
      Class,
      Information,
      Assemble,
      Bargain,
      Seckill,
      navTab,
      Recommend
    },
    data() {
      return {
        leftIndex: 0,
        list: [],
        navImg: require('../../../..//src/assets/settinyschool/find_head_url.jpg')
      }
    },
    created() {
      this.getListData()
    },
    methods: {
      left_click(index) {
        console.log(index)
        var that = this
        that.leftIndex = index
        for (let i = 0; i < that.list.length; i++) {
          that.list[i].showRight = false
          this.$set(that.list, i, that.list[i])
        }
        // this.$set(that.list,that.list)
        that.list[that.leftIndex].showRight = true
        console.log(that.list)
      },
      traverseList() {
        var that = this
        this.leftIndex = that.list.length - 1
        for (let i = 0; i < that.list.length; i++) {
          that.list[i].showRight = false
          this.$set(that.list, i, that.list[i])
        }
        that.list[that.leftIndex].showRight = true
      },
      addImageAd() {
        var that = this
        that.list.push(
          {
            cardRight: 1,
            type: 'image_ad',
            modelType: 'z',
            showRight: true,
            tenantId: getTenantId(),
            images: []
          }
        )
        this.traverseList()
      },
      addBannerAd() {
        var that = this
        that.list.push(
          {
            cardRight: 2,
            type: 'banner_ad',
            modelType: 'z',
            showRight: true,
            tenantId: getTenantId(),
            images: [{ url: '/src/assets/distribution/poster.png', linkRadio: 'instationLink', link: '', customLink: '' }, { url: '/src/assets/analyze_data/decorate.png', linkRadio: 'instationLink', link: '', customLink: '' }, {
              url: '/src/assets/analyze_data/decorate.png',
              linkRadio: 'instationLink',
              link: '',
              customLink: ''
            }]
          }
        )
        this.traverseList()
      },
      addCourse() {
        var that = this
        that.list.push(
          {
            cardRight: 3,
            type: 'course',
            modelType: 'z',
            showRight: true,
            courseType: 'all',
            recentDay: '',
            limit: 2,
            title: '预约直播',
            tenantId: getTenantId(),
            courseList: [/* { teacher: '侯小波', liveStatus: 'live', url: '/src/assets/subjectImg.png', title: '高中语文课程突破', hour: '20课时', money: '￥299' }, { teacher: '冯永', liveStatus: 'unlive', url: '/src/assets/subjectImg.png', title: '数学逻辑思维如何培养', hour: '20课时', money: '￥99' }, { teacher: '张天爱', liveStatus: 'playback', url: '/src/assets/subjectImg.png', title: '数学逻辑思维如何培养', hour: '20课时', money: '￥199' }*/]
          }
        )
        this.traverseList()
      },
      addClass() {
        var that = this
        that.list.push(
          {
            cardRight: 4,
            type: 'class',
            modelType: 'z',
            showRight: true,
            courseType: 'all',
            recentDay: '',
            limit: 2,
            title: '热门课程',
            courseTab: [],
            tenantId: getTenantId(),
            courseList: [/* { url: '/src/assets/subjectImg.png', title: '高中少年班', score: '4.8', study: '1351人学过', money: '￥399', originalPrice: '￥499', vipExempt: true }, { url: '/src/assets/subjectImg.png', title: '高中少年班', score: '4.8', study: '1351人学过', money: '￥399', originalPrice: '￥499', vipExempt: true }, { url: '/src/assets/subjectImg.png', title: '数学兴趣班', score: '4.8', study: '1351人学过', money: '￥399', originalPrice: '￥499', vipExempt: false }*/]
          }
        )
        this.traverseList()
      },
      // 个性推荐
      addRecommend() {
        var that = this
        that.list.push(
          {
            cardRight: 4,
            type: 'recommend',
            modelType: 'z',
            showRight: true,
            updateTime: '2019-12-05',
            courseType: 'all',
            recommendType: '最受欢迎',
            limit: 3,
            title: '个性推荐',
            tenantId: getTenantId(),
            bgUrl: '/src/assets/property/img_Topbg.png',
            courseList: [/* { url: '/src/assets/subjectImg.png', title: '高中少年班', content: '适合想长期了解班级学习适合想长期了解班级学习适合想长期了解班级学习的同学适合想长期了解班级学习的同学', score: '4.8', study: '1351人学过', money: '￥399', originalPrice: '￥499', vipExempt: true }, { url: '/src/assets/subjectImg.png', title: '高中少年班', content: '适合想长期了解班级学习的同学适合想长期了解班级学习的同学', score: '4.8', study: '1351人学过', money: '￥399', originalPrice: '￥499', vipExempt: true }, { url: '/src/assets/subjectImg.png', title: '数学兴趣班', content: '适合想长期了解班级学习适合想长期了解班级学习适合', score: '4.8', study: '1351人学过', money: '￥399', originalPrice: '￥499', vipExempt: false }*/]
          }
        )
        this.traverseList()
      },
      addInformation() {
        var that = this
        that.list.push(
          {
            cardRight: 5,
            type: 'information',
            showRight: true,
            informationInfo: []
          }
        )
        this.traverseList()
      },
      addMembers() {
        var that = this
        that.list.push(
          {
            cardRight: 1,
            type: 'navTab',
            modelType: 'z',
            showRight: true,
            tenantId: getTenantId(),
            tabList: [
              {
                url: '/src/assets/testing_images/huahua-0.png',
                link: 'www.baidu.com',
                title: '默认'
              }
            ]
          }
        )
        this.traverseList()
      },
      addAssemble() {
        var that = this
        that.list.push(
          {
            cardRight: 7,
            type: 'assemble',
            showRight: false,
            showTitle: 'yes',
            tag: '',
            assembleInfo: []
          }
        )
        this.traverseList()
      },
      addBargain() {
        var that = this
        that.list.push(
          {
            cardRight: 8,
            type: 'bargain',
            showRight: false,
            showTitle: 'yes',
            tag: '',
            bargainInfo: []
          }
        )
        this.traverseList()
      },
      addSeckill() {
        var that = this
        that.list.push(
          {
            cardRight: 9,
            type: 'seckill',
            showRight: false,
            showTitle: 'yes',
            tag: '',
            seckillInfo: []
          }
        )
        this.traverseList()
      },
      // 删除列表
      close(id) {
        console.log(id)
        if (id) {
          del(id).then(() => {
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
            this.list.splice(this.leftIndex, 1)
          })
        } else {
          this.list.splice(this.leftIndex, 1)
        }
      },
      addAssembly() {
        batchSave(this.list).then(() => {
          this.$notify({
            title: '成功',
            message: '创建成功',
            type: 'success',
            duration: 2000
          })
          this.getListData()
        })
      },
      getListData() {
        list(getTenantId(), 'z').then(response => {
          if (this.list.length > 0) {
            this.list = response.data.items
          } else {
            var that = this
            that.list.push(
              {
                cardRight: 1,
                type: 'image_ad',
                modelType: 'z',
                showRight: true,
                tenantId: getTenantId(),
                images: []
              }
            )
            that.list.push(
              {
                cardRight: 2,
                type: 'course',
                modelType: 'z',
                showRight: true,
                courseType: 'all',
                recentDay: '',
                limit: 2,
                title: '预约直播',
                tenantId: getTenantId(),
                courseList: []
              }
            )
            that.list.push(
              {
                cardRight: 3,
                type: 'class',
                modelType: 'z',
                showRight: true,
                courseType: 'all',
                recentDay: '',
                limit: 2,
                title: '热门课程',
                courseTab: [],
                tenantId: getTenantId(),
                courseList: []
              }
            )
            that.list.push(
              {
                cardRight: 4,
                type: 'banner_ad',
                modelType: 'z',
                showRight: true,
                tenantId: getTenantId(),
                images: [
                  { url: '/src/assets/distribution/poster.png', linkRadio: 'instationLink', link: '', customLink: '' },
                  { url: '/src/assets/analyze_data/decorate.png', linkRadio: 'instationLink', link: '', customLink: '' },
                  { url: '/src/assets/analyze_data/decorate.png', linkRadio: 'instationLink', link: '', customLink: '' }
                ]
              }
            )

            that.list.push(
              {
                cardRight: 5,
                type: 'navTab',
                modelType: 'z',
                showRight: true,
                tenantId: getTenantId(),
                tabList: [
                  {
                    url: '/src/assets/testing_images/huahua-0.png',
                    link: 'www.baidu.com',
                    title: '默认'
                  }
                ]
              }
            )

            that.list.push(
              {
                cardRight: 6,
                type: 'recommend',
                modelType: 'z',
                showRight: true,
                updateTime: '2019-12-05',
                courseType: 'all',
                recommendType: '最受欢迎',
                limit: 3,
                title: '个性推荐',
                tenantId: getTenantId(),
                bgUrl: '/src/assets/property/img_Topbg.png',
                courseList: []
              }
            )
            this.traverseList()
          }
        })
      }
    }

  }
</script>
<style lang="scss" scoped>
  .setting-page {
    position: relative;
    margin: 0 20px 20px;
    padding-bottom: 350px;
    width: 375px;
    min-height: 667px;
    box-sizing: border-box;
    border: 1px solid #e1e1e1;

    .find-head-img {
      width: 373px;
      vertical-align: top;
    }

    .find-navbar {
      position: relative;
      background-color: #212121;
      text-align: center;
      line-height: 56px;
      color: #fff;
      width: 374px;
      font-size: 18px;
      margin-left: -1px;
      margin-right: -1px;
    }

    .multi-find-section {
      background: #fff;
      padding: 0;

      .section-title {
        margin-left: 0;
        padding: 0 15px;
        background: #f5f5f5;
        line-height: 38px;
      }

      .section-button-group {
        padding: 7.5px 0 7.5px 15px;

        button {
          margin: 6px 2px;
        }
      }
    }

    .find-section {
      position: absolute;
      bottom: 50px;
      box-sizing: border-box;
      width: 373px;
      border-top: 1px solid #e1e1e1;
      border-bottom: 1px solid #e1e1e1;
      font-size: 14px;
    }

    // 底部样式
    .find-footer {
      position: absolute;
      bottom: 0;
      height: 50px;
      width: 100%;
      background-color: #fff;
      border-top: 1px solid #e1e1e1;

      .find-footer-item {
        display: inline-block;
        height: 100%;
        box-sizing: border-box;
        padding: 5px 0;
        font-size: 12px;
        color: #929292;
        text-align: center;

        .find-footer-item__icon {
          font-size: 26px;
        }

        .find-footer-item__text {
          display: block;
          text-align: center;
          line-height: 20px;
        }
      }

      .find-footer-item.active {
        color: #408ffb;
      }
    }
  }

  .contentList {
    border: 1px solid rgba($color: #fff, $alpha: 0);
    box-sizing: border-box;
    position: relative;

    .close {
      z-index: 3;
      position: absolute;
      top: -10px;
      right: -10px;
      width: 20px;

      img {
        width: 100%;
      }
    }
  }

  .contentList:hover {
    border: 1px solid #408ffb;
  }

  .border {
    border: 1px dotted #408ffb;
  }

  .saveBtn {
    margin-bottom: 310px;
    margin-left: 40px;
  }
</style>
